<template>
	<view class="wrapper">
		<u-loading-page loadingColor="#e3230e" iconSize="40" :loading="isPageLoading"></u-loading-page>
		<view v-show="!isPageLoading">
		<!--头部-->
		<view class="header" id="header">
			<menu-header>
				<view class="category-header main-flex">
					<view class="header-title">分类</view>
					<view class="header-search main-flex-item main-flex" @click="goSearch">
						<uni-icons type="search" size="18"></uni-icons>
						<view class="header-search-text">
							<search-words @change="changeWord"></search-words>
						</view>
					</view>
				</view>
			</menu-header>
		</view>
		
		<!--导航-->
		<view style="width: 100%;height: 0px;" id="nav"  v-if="userStore.isTc === 1"></view>
		<view class="nav" id="nav" v-else>
			<u-tabs
				:list="categoryList"
				:itemStyle="{
					height: 'auto',
					padding: '0 10rpx',
				}"
				:current="categoryCurrent"
				@click="changeCategory"
				:scrollable="categoryList.length > 5 ? true : false"
				lineWidth="0"
				lineHeight="0"
				keyName="name">
				<template #content="{item, keyName, index}">
					<view class="nav-item" :class="categoryCurrent === index ? 'nav-active' : ''">
						<view class="nav-item-icon">
							<image mode="aspectFill" class="nav-item-icon-img" :src="imgUrl(item.image)"></image>
						</view>
						<view class="nav-item-name">{{item.name}}</view>
					</view>
				</template>
			</u-tabs>
		</view>
		
		<!--商品-->
		<view class="product" :style="{ height: `${pageHeight > 0 ? pageHeight + 'px' : '80vh'}` }">
			<cate-tab
				class="product-tab"
				v-model:current="tabCurrent"
				:tabList="productList"
				@choose="chooseGoods"
				@click="goGoods"
				:categoryId="categoryId"
				tabKeyName="typeName"
				itemKeyName="productList">
				<template #tabItem="{item}">
					<view class="product-full-nav main-flex">
						{{item.typeName}}
					</view>
				</template>
				<template #pageItem="{pageItem}">
					<view class="product-full main-flex" @click="goGoods(pageItem)">
						<view class="product-full-l">
							<view class="product-full-img">
								<!-- <lazyLoad
									:src="imgUrl(pageItem.image)"
									mode="aspectFill">
								</lazyLoad> -->
								<lazy-load
									:image="imgUrl(pageItem.image)"
									loading-img="/static/images/loading.png"
									error-img="/static/images/error.png"
									img-mode="widthFix">
								</lazy-load>
							</view>
						</view>
						<view class="product-full-r main-flex-item main-flex">
							<view class="product-full-name">{{pageItem.name}}</view>
							<view class="product-full-market text_line2">{{pageItem.marketTitle}}</view>
							<view class="product-full-other main-flex">
								<view class="product-full-price">￥{{moneyStr(pageItem.sellPrice)}}</view>
								<view class="product-full-add" @click.stop="chooseGoods(pageItem)">
									<uni-icons type="plus-filled" color="#e3230e" size="28"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</template>
			</cate-tab>
			<!-- <cyt-classify
				:classifyList="productList"
				:height="0"
				@clickGoods="chooseGoods"></cyt-classify> -->
		</view>
		
		<!--商品弹窗-->
		<goods-popup
		@close="closeGoods"
		:showGoods="showGoods"
		:goods="goodsInfo"></goods-popup>
		</view>
	</view>
</template>

<script setup>
import useUserStore from '@/store/modules/user'
import { nextTick, onMounted, ref, watch, watchEffect } from 'vue'
import { onReady, onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
import { getNode } from '@/utils/ty.js';
import { throttle } from '@/uni_modules/uview-plus'
import { oneType } from "@/api/app_api/category"
import { product } from "@/api/app_api/product"
import modal from '@/plugins/modal'
	
	const userStore = useUserStore()
	
	// 页面设置
	const pageHeight = ref(0)
	const isPageLoading = ref(true)
	const init = async () => {
		// #ifdef MP-WEIXIN
		const height = uni.getWindowInfo().windowHeight
		// #endif
		// #ifndef MP-WEIXIN
		const height = uni.getSystemInfoSync().windowHeight
		// #endif
		const query = uni.createSelectorQuery()
		const headerNode = await getNode(query, '#header')
		const navNode = await getNode(query, '#nav')
		pageHeight.value = height - headerNode.height - navNode.height
	}

	// 分类
	const categoryList = ref([])
	const categoryId = ref('')
	const categoryCurrent = ref(0)
	const tabCurrent = ref(0)
	const getCategory = () => {
		userStore.getCategory().then(res => {
			categoryList.value = res
			nextTick(() => {
				init()
			})
			setCategory()
		})
	}
	const setCategory = () => {
		categoryId.value = userStore.categoryId
		categoryCurrent.value = categoryList.value.findIndex(item => item.id == categoryId.value)
		searchFirst()
	}
	// 切换分类
	const changeCategory = (e) => {
		if (categoryId.value === e.id) return false
		categoryCurrent.value = e.index
		categoryId.value = e.id
		uni.showLoading({
			title: '数据加载中...'
		})
		throttle(getList, 200)
	}
	
	// 查询商品
	const productList = ref([])
	const pageNum = ref(1)
	const pageSize = ref(10)
	const total = ref(0)
	const isLoading = ref(false)
	const status = ref('more')
	const isNull = ref(false)
	
	const searchFirst = () => {
		pageNum.value = 1
		// productList.value = []
		getList()
	}
	
	const getList = () => {
		if (isLoading.value || !userStore.sellChannel || !userStore.regionCode || !categoryId.value) return false
		const params = {
			// pageNum: pageNum.value,
			// pageSize: pageSize.value,
			sellChannel: userStore.sellChannel,
			regionCode: userStore.regionCode,
			typeId: categoryId.value
		}
		isLoading.value = true
		// uni.showLoading({
		// 	title: '商品加载中...'
		// })
		product(params).then(res => {
			productList.value = res.data.map(item => {
				return {
					...item,
					children: item.productList
				}
			}).filter(item => item?.productList && item.productList.length > 0)
			isPageLoading.value = false
			tabCurrent.value = 0
			isLoading.value = false
			uni.hideLoading()
		}).catch(() => {
			isLoading.value = false
			isPageLoading.value = false
			uni.hideLoading()
		})
	}
	
	// 选择商品
	const showGoods = ref(false)
	const goodsInfo = ref({})
	const chooseGoods = (item) => {
		showGoods.value = true
		goodsInfo.value = item
	}
	const closeGoods = () => {
		showGoods.value = false
		goodsInfo.value = {}
	}
	
	const word = ref('')
	const changeWord = (e) => {
		word.value = e
	}
	
	// 跳转到搜索页面
	const goSearch = () => {
		uni.navigateTo({
			url: word.value ? `/pages/goods/search?word=${word.value}` : '/pages/goods/search'
		})
	}
	
	watch(() => userStore.sellChannel, (newVal, oldVal) => {
		searchFirst()
	})
	watch(() => userStore.regionCode, (newVal, oldVal) => {
		searchFirst()
	})
	watch(() => userStore.categoryId, (newVal, oldVal) => {
		setCategory()
	})
	
	const goGoods = (item) => {
		uni.navigateTo({
			url: `/pages/goods/index?id=${item.id}`
		})
	}
	onPullDownRefresh(() => {
		getCategory()
		uni.stopPullDownRefresh()
	})
	onLoad(() => {
		getCategory()
	})
</script>

<style lang="scss">
	.header {
		width: 100%;
		box-sizing: border-box;
		padding: 12rpx 0;
		// #ifdef MP-WEIXIN
		padding-top: 0;
		// #endif
		&-title {
			font-size: 30rpx;
			font-weight: 600;
		}
		.category-header {
			width: 100%;
			height: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
		}
		&-search {
			height: 100%;
			border: 1px solid $primary-color;
			border-radius: 100px;
			margin-left: 20rpx;
			background-color: #ffffff;
			box-sizing: border-box;
			padding: 0 20rpx;
			&-text {
				width: 100%;
				height: 100%;
				margin-left: 10rpx;
			}
		}
	}
	.nav {
		padding: 20rpx 0;
		box-sizing: border-box;
		&-item {
			text-align: center;
			&-icon {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
				overflow: hidden;
				margin: 0 auto;
				box-sizing: border-box;
				transition: all .1s;
				&-img {
					width: 100%;
					height: 100%;
				}
			}
			&-name {
				min-width: 130rpx;
				padding: 0 10rpx;
				line-height: 40rpx;
				font-size: 22rpx;
				box-sizing: border-box;
				margin-top: 10rpx;
				border-radius: 20rpx;
				background-color: #ffffff;
				transition: all .1s;
			}
		}
		&-active {
			.nav-item-icon {
				border: 6rpx solid $primary-color;
			}
			.nav-item-name {
				background-color: $primary-color;
				color: #ffffff;
			}
		}
	}
	.product {
		&-tab {
			height: 100%;
		}
		&-full {
			width: 100%;
			min-height: 220rpx;
			// min-width: 486rpx;
			margin-top: 20rpx;
			align-items: flex-start;
			&-nav {
				width: 100%;
				height: 100%;
				flex-wrap: wrap;
				justify-content: center;
			}
			&-l {
				width: 180rpx;
				height: 180rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}
			&-img {
				width: 180rpx;
				height: 180rpx;
			}
			&-r {
				min-height: 200rpx;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;
				padding: 0 0 20rpx;
				margin-left: 10rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #dcdcdc;
			}
			&-name {
				font-size: 26rpx;
				color: $text-dark;
				font-weight: 600;
			}
			&-market {
				font-size: 20rpx;
				color: $text-light;
			}
			&-other {
				width: 100%;
			}
			&-add {
				margin-left: auto;
			}
			&-price {
				font-weight: 600;
				font-size: 30rpx;
				color: $price-color;
			}
		}
	}
</style>
